<template>
  <div id="main" style="width: 600px; height: 400px;"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import {invokeCountAccount} from "../../../api/interfaceinfo/info.js";


onMounted(() => {
  invokeCountAccount().then(res=>{
    console.log(res);
    const invokeCount = []
    const result = res.data
    result.forEach(item=>{
      invokeCount.push({value:item.totalNum,name:item.name})
    })
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      title: {
        text: '接口分析',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: invokeCount,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
  })
  // 基于准备好的dom，初始化echarts实例

});
</script>

<style scoped lang="scss">
/* 你的样式代码 */
</style>
